<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统菜单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body">

                <table class="layui-hide" id="menu-tree-table"></table>

                <script type="text/html" id="TPL-treeTable-demo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
                        <button class="layui-btn layui-btn-sm" lay-event="open">展开</button>
                        <button class="layui-btn layui-btn-sm" lay-event="close">关闭</button>
                        <button class="layui-btn layui-btn-sm" lay-event="set">设置选中</button>
                    </div>
                </script>
                <script type="text/html" id="TPL-treeTable-demo-tools">
                    <div class="layui-btn-container">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
                        <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
                    </div>
                </script>

            </div>
        </div>
    </div>


    <script>
        layui.use(function () {
            var treeTable = layui.treeTable;
            var layer = layui.layer;
            var dropdown = layui.dropdown;
            var constants = layui.constants;
            var AjaxUtils = layui.AjaxUtils;
            var toast = layui.toast;

            // 接口地址
            var dataApiUrl = constants.API_BASE_URL + "/auth/menu/all-treeTable-menu";

            // 渲染
            var inst = treeTable.render({
                elem: '#menu-tree-table',
                url: dataApiUrl, // 此处为静态模拟数据，实际使用时需换成真实接口
                headers: { 'token': localStorage.getItem("token") },
                method: 'get',
                height: '760px',
                toolbar: '#TPL-treeTable-demo',
                response: {
                    statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
                },
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                    { field: 'name', title: '菜单名称', width: '30%', fixed: 'left', edit: 'text' },
                    {
                        field: 'type', title: '菜单类型', width: 180, templet: function (d) {
                            if (d.type == '0') {
                                return '<span style="color: #36b368">目录</span>';
                            } else if (d.type == '1') {
                                return '<span style="color: pink">菜单</span>';
                            } else if (d.type == '2') {
                                return '<span style="color: blue">按钮</span>';
                            } else {
                                toast.error({
                                    message: '菜单类型错误',
                                });
                            }
                        }
                    },
                    {
                        field: 'url', title: '菜单路径', width: 180, edit: function (d) {
                            if (d.type == 1) return 'text';
                        }
                    },
                    { field: 'perms', title: '权限码值', width: 180, edit: 'text' },
                    {
                        field: 'status', title: '权限状态', width: 180, templet: function (d) {
                            if (d.status == 1) {
                                return '<span style="color: #36b368">启用</span>';
                            } else if (d.status == 0) {
                                return '<span style="color: red">禁用</span>';
                            } else {
                                toast.error({
                                    message: '权限状态错误',
                                });
                            }
                        }, edit: 'text'
                    },
                    { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools" }
                ]],
                error: function (res, msg) {
                    toast.error({
                        message: msg,
                    });
                },
                done: function (res, curr, count, origin) {
                    // debugger
                    // console.log(res); // 得到当前渲染的数据
                    // console.log(curr);  // 得到当前页码
                    // console.log(count); // 得到数据总量
                    // console.log(origin); // 回调函数所执行的来源 --- 2.8.7+
                },
                complete: function (xhr, ts) {
                    if (xhr.responseJSON.code == 520) {
                        AjaxUtils.redirectToLogin();
                    }
                },
                page: false
            });

            // 表头工具栏工具事件
            treeTable.on("toolbar(menu-tree-table)", function (obj) {
                var config = obj.config;
                var tableId = config.id;
                var status = treeTable.checkStatus(tableId);
                // 获取选中行
                if (obj.event === "getChecked") {
                    debugger
                    if (!status.data.length) return layer.msg('无选中数据');
                }
                if (obj.event === "open") {
                    treeTable.expandAll(inst.config.id, true);
                }
                if (obj.event === "close") {
                    treeTable.expandAll(inst.config.id, false);
                }
                if (obj.event === "set") {
                    // 批量选中行
                    // treeTable.setRowChecked('menu-tree-table', {
                    //     index: "0-0-0",
                    //     checked: true
                    // });
                    // treeTable.setRowChecked('menu-tree-table', {
                    //     index: "0-1",
                    //     checked: true
                    // });
                    // treeTable.setRowChecked('menu-tree-table', {
                    //     index: "0-2",
                    //     checked: true
                    // });
                    // treeTable.setRowChecked('menu-tree-table', {
                    //     index: "0-3",
                    //     checked: true
                    // });
                }
            });
            // 单元格工具事件
            treeTable.on('tool(' + inst.config.id + ')', function (obj) {
                var layEvent = obj.event; // 获得 lay-event 对应的值
                var trElem = obj.tr;
                var trData = obj.data;
                var tableId = obj.config.id;
                if (layEvent === "detail") {
                    layer.msg("查看操作：" + trData.name);
                } else if (layEvent === "addChild") {
                    // 新增节点
                    if (trData.id == undefined) {
                        layer.tips('请先编辑本行并保存', this, { tips: 1 });
                        return;
                    }
                    var data = {};
                    if (trData.type == 0) {
                        // 操作节点为 目录，新增菜单子节点
                        data = { parentId: trData.id, name: '菜单新节点', type: 1, perms: '权限码值', url: '菜单路径', status: 1 };
                    } else if (trData.type == 1) {
                        // 操作节点为 菜单，新增按钮子节点
                        data = { parentId: trData.id, name: '按钮新节点', type: 2, perms: '权限码值', status: 1 };
                    } else {
                        layer.tips('按钮下禁止新建权限', this, { tips: 1 });
                        return;
                    }

                    var newNode2 = treeTable.addNodes(tableId, {
                        parentIndex: trData["LAY_DATA_INDEX"],
                        index: -1,
                        data: data
                    });
                    debugger
                } else if (layEvent === "more") {
                    // 下拉菜单
                    // dropdown.render({
                    //     elem: this, // 触发事件的 DOM 对象
                    //     show: true, // 外部事件触发即显示
                    //     align: "right", // 右对齐弹出
                    //     data: [
                    //         {
                    //             title: "编辑信息",
                    //             id: "edit"
                    //         },
                    //         {
                    //             title: "删除",
                    //             id: "del"
                    //         }
                    //     ],
                    //     click: function (menudata) {
                    //         if (menudata.id === "del") {
                    //             layer.confirm("真的删除行么", function (index) {
                    //                 obj.del(); // 等效如下
                    //                 // treeTable.removeNode(tableId, trElem.attr('data-index'))
                    //                 layer.close(index);
                    //             });
                    //         } else if (menudata.id === "edit") {
                    //             layer.prompt({
                    //                 value: trData.experience,
                    //                 title: "编辑信息"
                    //             }, function (value, index) {
                    //                 obj.update({ experience: value }); // 等效如下
                    //                 // treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
                    //                 layer.close(index);
                    //             });
                    //         }
                    //     }
                    // });
                }
            });
            // 单元格编辑事件
            treeTable.on('edit(' + inst.config.id + ')', function (obj) {
                var field = obj.field; // 得到修改的字段
                var value = obj.value // 得到修改后的值
                var oldValue = obj.oldValue // 得到修改前的值
                var data = obj.data // 得到所在行所有键值
                var config = obj.config;
                var tableId = config.id;

                // 获取选中行
                // var status = treeTable.checkStatus(tableId);
                // if (!status.data.length) return layer.msg('无选中数据');
                // console.log(status);
                // layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");

                // TODO 判断是新增还是编辑

                if (field === 'name') {
                    // 菜单名称
                    if (value.length == 0 || value.length > 20) {
                        layer.tips('菜单名称长度错误', this, { tips: 1 });
                        return obj.reedit(); // 重新编辑
                    }
                }

                if (field === 'status') {
                    // 状态
                    if (value != 0 && value != 1) {
                        layer.tips('0代表启用，1代表禁用', this, { tips: 1 });
                        return obj.reedit(); // 重新编辑
                    }
                }

                // 判断是否调用后端接口
                // 显示确认框
                layer.confirm('确定执行此操作？', {
                    btn: ['确定', '取消'] // 自定义按钮
                    , icon: 3 // 提示图标
                }, function (index) {
                    // 点击“确定”按钮后执行的方法
                    AjaxUtils.request(
                        {
                            url: '/auth/menu',
                            data: {
                                "id": data.id,
                                "parentId": data.parentId,
                                "menuName": data.name,
                                "perms": data.perms,
                                "status": data.status,
                                "url": data.url
                            },
                            type: 'POST'
                        }, function (data) {
                            // 重新加载表格
                            toast.success({
                                message: '操作成功',
                            });
                            treeTable.reloadData(inst.config.id);
                        },
                        function (errMsg) {
                            toast.error({
                                message: errMsg,
                            });
                            treeTable.reloadData(inst.config.id);
                        }
                    );

                    // 关闭确认框
                    layer.close(index);
                }, function (index) {
                    // 点击“取消”按钮后的回调（可选）
                    treeTable.reloadData(inst.config.id);

                    // 关闭确认框
                    layer.close(index);
                });
            });
        });
    </script>

</body>

</html>